<template>
  <dw-page-warpper :flex="showTree">
    <div :class="showTree ? 'show-tree tree-warpper' : 'hidden-tree tree-warpper'">
      <dw-tree :show-search="false" :readonly="true" data-type="parentId" :tree-props="treeProps" :getTreeUrl="getTreeUrl" @currentChange="currentNodeChange"></dw-tree>
    </div>
    <div :class="showTree ? 'grid-width-diff grid-warpper' : 'grid-width-100 grid-warpper'">
      <dw-menu-datagrid-form
        ref="dwMenuDataGridFormRef"
        :init-loaded="false"
        :columns="columns"
        :data-grid-title="dataGridTitle"
        :operation-items="operationItems"
        v-model:activeFormData="formData"
        :render-form-title="renderFormTitle"
        :get-page-http-config="getPageHttpConfig"
        :del-info-http-config="delInfoHttpConfig"
        :del-list-http-config="delListHttpConfig"
        :get-info-http-config="getInfoHttpConfig"
        :add-info-http-config="addInfoHttpConfig"
        :update-info-http-config="updateInfoHttpConfig"
        @handleSelect="handleSelect"
      >
        <template #btnRightSlot="{ status }">
          <el-radio-group v-model="radioValue" style="padding-left: 20px">
            <el-radio-button label="表结构维护" value="tableStructureConfig" />
            <el-radio-button label="关联场景配置" value="tableRealtionConfig" :disabled="status !== 'edit'" />
          </el-radio-group>
        </template>
        <template #formSlot>
          <div v-if="radioValue === 'tableStructureConfig'">
            <el-form :model="formData" label-width="80px" style="width: calc(100% - 30px); padding-top: 15px">
              <el-row>
                <el-col :span="6">
                  <el-form-item label="数据库">
                    <dw-select ref="selDatabaseRef" :url="databaseUrl" text-field="databaseName" v-model="formData.databaseId" placeholder="请选择主机..."></dw-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="表名称">
                    <el-input v-model="formData.tableName" @input="handleInput(formData)" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="表结构类型" label-width="120">
                    <dict-selector v-model="formData.structureTypeCode" dict-code="DATABASE_TABLE_STRUCTURE_TYPE" placeholder="请选择表结构类型..." @change="structureTypeChange"></dict-selector>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="排序号" prop="sortNo">
                    <el-input-number v-model="formData.sortNo"> </el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="表备注">
                    <el-input v-model="formData.tableComment" type="textarea" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <database-column-table ref="databaseColumnTableRef"></database-column-table>
          </div>

          <database-table-relation v-if="radioValue === 'tableRealtionConfig'"></database-table-relation>
        </template>
      </dw-menu-datagrid-form>
    </div>
  </dw-page-warpper>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import type { IAddInfoHttpConfig, IColumn, IDelInfoHttpConfig, IDelListHttpConfig, IGetInfoHttpConfig, IGetPageHttpConfig, IOperationItem, IUpdateInfoHttpConfig } from '@/types/menu-datagrid-form';
import type { IDatabaseTreeNode, IDatabaseTable } from './database-table';
import DatabaseColumnTable from './components/database-column.vue';
import DatabaseTableRelation from './components/database-table-relation.vue';
import DwSelect from '@/components/selector/dropdown-selector/index.vue';
defineOptions({
  name: 'DatabaseTable',
});
const radioValue = ref<string>('tableStructureConfig');
const showTree = ref<boolean>(true);

const treeProps = { label: 'comment' };
const getTreeUrl: string = '/admin-api/modeling/database/tree';
const databaseUrl = ref<string>('/admin-api/modeling/database/list');
const formData = ref<IDatabaseTable>({
  id: '',
  databaseId: '',
  tableName: '',
  tableComment: '',
  structureTypeCode: '',
  sortNo: 1,
});
const dataGridTitle = '数据库表结构列表';
const renderFormTitle = (stateValue: 'add' | 'edit', data: IDatabaseTable) => {
  if (stateValue === 'add') {
    return '数据库表结构信息';
  } else {
    return data.tableComment;
  }
};
const operationItems = ref<IOperationItem<IDatabaseTable>[]>([
  {
    code: 'edit',
    extendFlag: true, //如果code有值 extendFlag=true 才有效
  },
  {
    slotName: 'connection',
  },
  {
    code: 'delInfo',
    extendFlag: true, //如果code有值 extendFlag=true 才有效
  },
]);
const columns = ref<IColumn[]>([
  {
    prop: 'tableName',
    label: '表名称',
    align: 'left',
    width: 320,
  },
  {
    prop: 'tableComment',
    label: '表备注',
    align: 'left',
  },
  {
    prop: 'sortNo',
    label: '排序',
    align: 'right',
    width: 100,
  },
]);
const delInfoHttpConfig: IDelInfoHttpConfig = {
  url: '/admin-api/modeling/database/table/#{id}',
  delInfoMsgEmphasize: '#{tableName}',
};
const delListHttpConfig: IDelListHttpConfig = {
  url: '/admin-api/modeling/database/table/list',
};
const getPageHttpConfig: IGetPageHttpConfig<IDatabaseTable> = {
  url: '/admin-api/modeling/database/table/page/list',
};
const getInfoHttpConfig: IGetInfoHttpConfig<IDatabaseTable> = {
  url: '/admin-api/modeling/database/table/#{id}',
};
const addInfoHttpConfig: IAddInfoHttpConfig<IDatabaseTable> = {
  url: '/admin-api/modeling/database/table',
};
const updateInfoHttpConfig: IUpdateInfoHttpConfig<IDatabaseTable> = {
  url: '/admin-api/modeling/database/table',
};

const handleSelect = (newData: string, oldData: string) => {
  if (newData != oldData) {
    if (newData !== 'datagrid') {
      hiddenTree(true);
    } else {
      hiddenTree(false);
    }
  }
};

const currentNodeData = ref<IDatabaseTreeNode | undefined>();
const currentNodeChange = (data: IDatabaseTreeNode) => {
  currentNodeData.value = data;
  formData.value.databaseId = data.id;
};
const dwMenuDataGridFormRef = ref();
watch(currentNodeData, () => {
  dwMenuDataGridFormRef.value.loadData();
});

const handleInput = (formData: Record<string, unknown>) => {
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  //@ts-ignore
  formData.tableName = formData.tableName.toUpperCase();
};

const hiddenTree = (hidden: boolean) => {
  if (hidden) {
    showTree.value = false;
  } else {
    showTree.value = true;
  }
};
const databaseColumnTableRef = ref();
const structureTypeChange = (value: string) => {
  databaseColumnTableRef.value.setStructureType(value);
};
</script>
<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs {
  :deep(.el-tabs__nav) {
    padding: 0 20px;
  }
}
.show-tree {
  display: block;
}

.hidden-tree {
  display: none;
}

.tree-warpper {
  width: 280px;
  height: 100%;
  background-color: #fff;
  box-shadow: #fff;
}
.grid-width-diff {
  width: calc(100% - 285px);
}
.grid-width-100 {
  width: 100%;
}
.grid-warpper {
  height: 100%;
  background-color: #fff;
  box-shadow: #fff;
}
</style>
